<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@include file="/app_inc/bootstrap_css.jsp" %>
<title>Bootstrap学习</title>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50" class="modal-open">
<div class="btn-group">
  <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Action
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="show-progress">开始上传</li>
    <li class="show-progress">开始上传</li>
    <li class="show-progress">开始上传</li>
  </ul>
</div>
<div class="progress progress-striped
     active">
  <div id="pr" class="bar"
       style="width: 0%;"></div>
</div>
<!-- 模态窗口alert() -->
<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
  	<!-- 鼠标掠过tips -->
    <p><a id="btnUp" href="#" class="btn popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a></p>
    <!-- 鼠标掠过tips -->
    <p><a id="btnDown" href="#" class="tooltip-test" data-original-title="Tooltip">This link</a></p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
<!-- loading按钮 -->
<button id="fat-btn" data-loading-text="loading..." data-complete-text="finished!" class="btn btn-primary">Loading State</button>
<!-- 自动补全输入 -->
<input id="typeahead" type="text" data-provide="typeahead" />

<div id="myCarousel" class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item"><img src="/demo/img/1.png" /></div>
    <div class="item"><img src="/demo/img/2.jpg" /></div>
    <div class="item"><img src="/demo/img/3.jpg" /></div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<%@include file="/app_inc/bootstrap_js.jsp" %>
<script>
var c = 1;
$('#myModal').modal({
	  keyboard: false,
	  show:false,
});

$('#btnUp').popover();//淡入淡出

$('#btnDown').tooltip();//小标签

$('#typeahead').typeahead({source:["java","java1"],items:1});//自动补全

$('#myCarousel').carousel({
	  interval: 2000
});

$('#fat-btn')
.click(function () {
  var btn = $(this);
  btn.button('loading');
  setTimeout(function () {
    btn.button('reset');
  }, 3000)
})
$(function(){
	$_pr = $("#pr");
	$(".show-progress").click(function(){
		setInterval("up(c)",100);
	});
})
function up(size){
	if(size<=100){
		if(size==100){
			$('#myModal').modal('show');
		}
		c++;
		$_pr.attr("style","width:"+size+"%")
	}
}
</script>
</body>
</html>